/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

.audio {
  // position: relative;
  overflow: visible!important;

  &-toggle, 
  &-download {
    // overflow: hidden;
    border-radius: 50%;
    background-color: var(--primary-color);
    align-items: center;
  }

  &.corner-download {
    .audio-download {
      // top: 0;
      width: 1.375rem;
      height: 1.375rem;
      // margin: 2rem 2rem 0;
      margin: 0 !important;
      top: 57.5%;
      left: 57.5%;
      background: none;
      display: flex !important;
    }

    .preloader-container {
      border-radius: inherit;
      background-color: var(--primary-color);
    }

    .preloader-path-new {
      stroke-width: .25rem;
    }
  }

  &-play-icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: rotate(-119deg);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    border-radius: inherit;

    @include animation-level(2) {
      transition: transform .25s ease-in-out;
    }
  }

  &-toggle {
    .part {
      position: absolute;
      background-color: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      @include animation-level(2) {
        transition: clip-path .25s ease-in-out;
      }

      @include respond-to(not-handhelds) {
        height: 140px;
        width: 140px;
      }

      @include respond-to(handhelds) {
        height: 92px;
        width: 92px;
      }

      &.one {
        clip-path: polygon(
          56.42249% 57.01763%,
          54.93283% 57.0175%,
          53.00511% 57.01738%,
          50.83554% 57.01727%,
          48.62036% 57.01718%,
          46.55585% 57.01709%,
          44.83822% 57.01702%,
          43.66373% 57.01698%,
          43.22863% 57.01696%,
          42.86372% 57.01904%,
          42.56988% 57.01621%,
          42.3402% 56.99486%,
          42.16778% 56.94152%,
          42.0457% 56.84267%,
          41.96705% 56.68478%,
          41.92493% 56.45432%,
          41.91246% 56.13777%,
          41.91258% 55.76282%,
          41.9129% 55.37058%,
          41.91335% 54.96757%,
          41.91387% 54.56032%,
          41.91439% 54.15537%,
          41.91485% 53.75926%,
          41.91517% 53.3785%,
          41.91529% 53.01965%,
          41.94275% 52.72355%,
          42.02117% 52.51653%,
          42.14465% 52.38328%,
          42.30727% 52.30854%,
          42.50308% 52.27699%,
          42.72619% 52.27341%,
          42.97065% 52.28248%,
          43.23056% 52.2889%,
          43.94949% 52.28896%,
          45.45083% 52.28912%,
          47.47445% 52.28932%,
          49.76027% 52.28957%,
          52.04818% 52.28981%,
          54.07805% 52.29003%,
          55.5898% 52.29019%,
          56.32332% 52.29024%,
          56.58221% 52.28816%,
          56.83726% 52.28948%,
          57.07897% 52.30593%,
          57.29794% 52.34898%,
          57.48468% 52.43029%,
          57.62978% 52.56146%,
          57.72375% 52.7541%,
          57.75718% 53.01981%,
          57.75713% 53.37763%,
          57.75699% 53.81831%,
          57.75679% 54.31106%,
          57.75657% 54.82507%,
          57.75635% 55.32958%,
          57.75615% 55.79377%,
          57.75601% 56.18684%,
          57.75596% 56.47801%,
          57.7549% 56.50122%,
          57.74034% 56.5624%,
          57.6955% 56.64887%,
          57.60334% 56.748%,
          57.44691% 56.84712%,
          57.20925% 56.93358%,
          56.87342% 56.99471%
        );
      }

      &.two {
        clip-path: polygon(
          56.42249% 42.44625%,
          54.93283% 42.44637%,
          53.00511% 42.44649%,
          50.83554% 42.4466%,
          48.62036% 42.4467%,
          46.55585% 42.44679%,
          44.83822% 42.44685%,
          43.66373% 42.4469%,
          43.22863% 42.44691%,
          42.86372% 42.44483%,
          42.56988% 42.44767%,
          42.3402% 42.46902%,
          42.16778% 42.52235%,
          42.0457% 42.6212%,
          41.96705% 42.77909%,
          41.92493% 43.00956%,
          41.91246% 43.32611%,
          41.91258% 43.70105%,
          41.9129% 44.0933%,
          41.91335% 44.49631%,
          41.91387% 44.90355%,
          41.91439% 45.3085%,
          41.91485% 45.70462%,
          41.91517% 46.08537%,
          41.91529% 46.44422%,
          41.94275% 46.74032%,
          42.02117% 46.94735%,
          42.14465% 47.0806%,
          42.30727% 47.15534%,
          42.50308% 47.18688%,
          42.72619% 47.19047%,
          42.97065% 47.1814%,
          43.23056% 47.17497%,
          43.94949% 47.17491%,
          45.45083% 47.17476%,
          47.47445% 47.17455%,
          49.76027% 47.1743%,
          52.04818% 47.17406%,
          54.07805% 47.17384%,
          55.5898% 47.17369%,
          56.32332% 47.17363%,
          56.58221% 47.17571%,
          56.83726% 47.17439%,
          57.07897% 47.15795%,
          57.29794% 47.1149%,
          57.48468% 47.03359%,
          57.62978% 46.90242%,
          57.72375% 46.70977%,
          57.75718% 46.44406%,
          57.75713% 46.08625%,
          57.75699% 45.64557%,
          57.75679% 45.15282%,
          57.75657% 44.6388%,
          57.75635% 44.1343%,
          57.75615% 43.6701%,
          57.75601% 43.27703%,
          57.75596% 42.98586%,
          57.7549% 42.96265%,
          57.74034% 42.90148%,
          57.6955% 42.815%,
          57.60334% 42.71587%,
          57.44691% 42.61675%,
          57.20925% 42.53029%,
          56.87342% 42.46916%
        );
      }
    }

    &.playing .audio-play-icon {
      transform: rotate(-90deg);
    }

    &:not(.playing) {
      .part {
        @include respond-to(not-handhelds) {
          height: 136px;
          width: 136px;
        }
  
        @include respond-to(handhelds) {
          height: 92px;
          width: 92px;
        }
  
        &.one {
          clip-path: polygon(
            43.77666% 55.85251%,
            43.77874% 55.46331%,
            43.7795% 55.09177%,
            43.77934% 54.74844%,
            43.77855% 54.44389%,
            43.77741% 54.18863%,
            43.77625% 53.99325%,
            43.77533% 53.86828%,
            43.77495% 53.82429%,
            43.77518% 53.55329%,
            43.7754% 53.2823%,
            43.77563% 53.01131%,
            43.77585% 52.74031%,
            43.77608% 52.46932%,
            43.7763% 52.19832%,
            43.77653% 51.92733%,
            43.77675% 51.65633%,
            43.77653% 51.38533%,
            43.7763% 51.11434%,
            43.77608% 50.84334%,
            43.77585% 50.57235%,
            43.77563% 50.30136%,
            43.7754% 50.03036%,
            43.77518% 49.75936%,
            43.77495% 49.48837%,
            44.48391% 49.4885%,
            45.19287% 49.48865%,
            45.90183% 49.48878%,
            46.61079% 49.48892%,
            47.31975% 49.48906%,
            48.0287% 49.4892%,
            48.73766% 49.48934%,
            49.44662% 49.48948%,
            50.72252% 49.48934%,
            51.99842% 49.4892%,
            53.27432% 49.48906%,
            54.55022% 49.48892%,
            55.82611% 49.48878%,
            57.10201% 49.48865%,
            58.3779% 49.4885%,
            59.6538% 49.48837%,
            59.57598% 49.89151%,
            59.31883% 50.28598%,
            58.84686% 50.70884%,
            58.12456% 51.19714%,
            57.11643% 51.78793%,
            55.78697% 52.51828%,
            54.10066% 53.42522%,
            52.02202% 54.54581%,
            49.96525% 55.66916%,
            48.3319% 56.57212%,
            47.06745% 57.27347%,
            46.11739% 57.79191%,
            45.42719% 58.14619%,
            44.94235% 58.35507%,
            44.60834% 58.43725%,
            44.37066% 58.41149%,
            44.15383% 58.27711%,
            43.99617% 58.0603%,
            43.88847% 57.77578%,
            43.82151% 57.43825%,
            43.78608% 57.06245%,
            43.77304% 56.66309%,
            43.773% 56.25486%
          );
        }
  
        &.two {
          clip-path: polygon(
            43.77666% 43.83035%,
            43.77874% 44.21955%,
            43.7795% 44.59109%,
            43.77934% 44.93442%,
            43.77855% 45.23898%,
            43.77741% 45.49423%,
            43.77625% 45.68961%,
            43.77533% 45.81458%,
            43.77495% 45.85858%,
            43.77518% 46.12957%,
            43.7754% 46.40056%,
            43.77563% 46.67156%,
            43.77585% 46.94255%,
            43.77608% 47.21355%,
            43.7763% 47.48454%,
            43.77653% 47.75554%,
            43.77675% 48.02654%,
            43.77653% 48.29753%,
            43.7763% 48.56852%,
            43.77608% 48.83952%,
            43.77585% 49.11051%,
            43.77563% 49.38151%,
            43.7754% 49.65251%,
            43.77518% 49.9235%,
            43.77495% 50.1945%,
            44.48391% 50.19436%,
            45.19287% 50.19422%,
            45.90183% 50.19408%,
            46.61079% 50.19394%,
            47.31975% 50.1938%,
            48.0287% 50.19366%,
            48.73766% 50.19353%,
            49.44662% 50.19338%,
            50.72252% 50.19353%,
            51.99842% 50.19366%,
            53.27432% 50.1938%,
            54.55022% 50.19394%,
            55.82611% 50.19408%,
            57.10201% 50.19422%,
            58.3779% 50.19436%,
            59.6538% 50.1945%,
            59.57598% 49.79136%,
            59.31883% 49.39688%,
            58.84686% 48.97402%,
            58.12456% 48.48572%,
            57.11643% 47.89493%,
            55.78697% 47.16458%,
            54.10066% 46.25764%,
            52.02202% 45.13705%,
            49.96525% 44.01371%,
            48.3319% 43.11074%,
            47.06745% 42.4094%,
            46.11739% 41.89096%,
            45.42719% 41.53667%,
            44.94235% 41.3278%,
            44.60834% 41.24561%,
            44.37066% 41.27137%,
            44.15383% 41.40575%,
            43.99617% 41.62256%,
            43.88847% 41.90709%,
            43.82151% 42.24461%,
            43.78608% 42.62041%,
            43.77304% 43.01978%,
            43.773% 43.428%
          );
        }
      }
    }
  }

  &-download {
    z-index: 2;
  }

  &-waveform {
    height: 100%;

    &-background {
      .audio-waveform-bar {
        opacity: .3;
  
        @include hover() {
          opacity: 1;
        }
      }
    }

    &-fake {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 0;
      overflow: hidden;
      pointer-events: none;
    }

    &-container {
      position: relative;
      height: 23px;
      margin-top: 1px;
      display: flex;
      align-items: center;
    }

    &-bar {
      fill: var(--primary-color);
      //overflow: visible!important;
    }
    
    /* @include respond-to(handhelds) {
      margin-top: -4px;
    } */
  }

  // //&.audio-54 {
  //   &-details {
  //     margin-top: 4px;
  //     margin-bottom: 2px;
  //   }
  // //}

  // &.audio-48 {
    --icon-size: 3rem;
    --icon-margin: .5625rem;
    height: var(--icon-size);

    .audio-details {
      margin-top: 3px;
      margin-bottom: 0;
    }

    .audio-title {
      margin-bottom: -2px;
    }

    body.is-premium &.can-transcribe {
      padding-inline-end: 2.25rem;

      .audio-to-text-button {
        display: flex;
      }
    }
    
    .audio-to-text-button {
      background: var(--light-filled-message-primary-color);
      color: var(--message-primary-color);
      width: max-content;
      font-size: 1.1875rem;
      border-radius: 0.3125rem;
      width: 2rem;
      height: 1.5rem;
      display: none;
      align-items: center;
      justify-content: center;
      position: absolute;
      overflow: hidden;
      align-self: flex-end;
      margin-right: -2.25rem;
      margin-top: -1rem;

      @include hover() {
        &:after {
          content: " ";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          border-radius: inherit;
          background-color: var(--message-primary-color);
          opacity: $hover-alpha;
        }
      }

      .loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity .2s;

        &.active {
          opacity: 1;
        }

        .audio-transcribe-outline {
          width: 100%;
          height: 100%;

          @keyframes loading {
            from { stroke-dashoffset: 100 }
            to { stroke-dashoffset: 0 }
          }

          &-rect {
            animation: 1s ease-in-out loading infinite;
          }
        }
      }
    }

    .part {
      height: 112px !important;
      width: 112px !important;

      @include respond-to(handhelds) {
        width: 100px !important;
        height: 100px !important;
      }
    }
  // }

  &-title {
    font-size: 1rem;
    color: var(--primary-text-color);
  }

  &-description:not(:empty) {
    &:before {
      content: " • ";
    }
  }

  &-time, 
  &-subtitle {
    font-size: .875rem;
    color: var(--secondary-text-color);
    display: flex;

    @include respond-to(handhelds) {
      font-size: .75rem;
    }
  }

  &-title,
  &-time, 
  &-subtitle {
    @include text-overflow();
  }

  // * for audio
  &-subtitle {
    align-items: center;

    .audio-time {
      flex: 0 0 auto;
      margin-right: .25rem;
    }
  }

  // * for audio
  &-title, 
  &-subtitle {
    margin-left: -1px;
  }

  // * for audio
  &-title, 
  &:not(.audio-show-progress) &-subtitle {
		max-width: 100%;
  }

  &.is-voice {
    .audio-time {
      line-height: 1;
      margin-left: -1px;
      margin-top: 7px;
      align-items: center;
    }

    .progress-line {
      margin-top: 4px;
      margin-inline-start: 0;
      min-width: 11.25rem;

      &__filled:after {
        opacity: 0;
      }
    }

    // .audio-toggle:not(.playing) + .audio-waveform-container {
    //   .progress-line__filled:after {
    //     opacity: 0;
    //   }
    // }

    @include respond-to(handhelds) {
      .audio-time {
        margin-top: .3125rem;
      }

      .audio-waveform-container {
        height: 16px;
        margin-top: 0;
      }
    }

    &.is-unread {
      .audio-time {
        &:after {
          content: " ";
          width: .5rem;
          height: .5rem;
          background-color: var(--primary-color);
          border-radius: 50%;
          margin-left: .375rem;
        }
      }

      &:not(.is-out) .audio-toggle:not(.playing) + .audio-waveform-container .audio-waveform-background .audio-waveform-bar {
        opacity: 1;
      }
    }
  }

  // * for audio
  .progress-line {
    --height: 2px;
    --border-radius: 4px;
    --thumb-size: .75rem;
    flex: 1 1 auto;
    margin: 0 6px 0 5px; // margin-right due to overflow
  }

  &-with-thumb {
    .audio-play-icon {
      z-index: 1;
      background-color: transparent;
      opacity: 1;

      @include animation-level(2) {
        transition: transform .25s ease-in-out, background-color .2s ease-in-out, opacity .2s ease-in-out;
      }

      .part {
        background-color: #fff !important;
      }

      &:not(:last-child) {
        background-color: rgba(0, 0, 0, .3);
      }
    }

    .media-photo {
      border-radius: inherit;
      object-fit: cover;
      width: inherit;
      height: inherit;
    }

    &:not(.corner-download) {
      .audio-download {
        background-color: rgba(0, 0, 0, .3);
      }

      &.downloading {
        .audio-play-icon {
          opacity: 0;
        }
      }
    }
  }
}